<template>
	<div class="bigdiv"  v-show="showState">
			<div class="dltitle">登录
			<div class="revert"  v-on:click="changedl" ></div>
			</div>
			<div class="jump">	
				<div class="main">
			
						<input class="sjzc" type="text" v-model="name"  placeholder="手机号" />				
						<input class="szmm" type="text" v-model="pwd" placeholder="密码" />
						<input class="zcan" type="submit" value="登录" v-on:click="login"/> 
				</div>
			</div>
		</div>
</template>

<script>
	
		export default {
		data(){
			return{
				name:'',
				pwd:''
			}
		},
		computed: {
			showState(){
				// 获取仓库当中的状态值
				return this.$store.state.dengluState;
			}
		},
		methods:{
			changedl(){
				this.$store.commit('changeDenglu');
			},
			login(){
				this.$http({
					method:'POST',
					url: 'http://localhost:8080/login',
					params:{
						name:this.name,
						pwd:this.pwd
					}
				}).then(function(req){
					var result = req. body.status;
					console.log(req);
					if(result==1){
						localStorage.setItem("userInfo",this.name);
						location.href="http://localhost:8080/#/selected";
						this.$store.commit('changeDenglu');
						this.$store.commit('changeState');
						this.$store.commit('changeyhm');
						this.$store.commit('changeUser',localStorage.userInfo);
						
//						alert('dengl成功')
					}else{
//						alert('用户名或密码错误');
					}
				})
			}
		}
	}
</script>

<style scoped>
		.bigdiv{
				width: 100%;
				height: 100%;
				background-color: #fff;
				position: absolute;
				z-index: 11111111114;
			}
			
			.dltitle{
				width: 100%;
				height: 1.413043rem;
				line-height: 1.413043rem;
				text-align: center;
				font-size: 0.521739rem;
				position: relative;
				background-color: #fbfbfb;
	
				
			}
			
			.revert{
				width: 0.434782rem;
				height: 0.652173rem;
				position: absolute;
				top: 0.4rem;
				left: 0.434782rem;
				background: url(../../img/lfjt.png) center center no-repeat;
				background-size: 100%;
			}
			.jump{
				width: 100%;
				height: 11.195652rem;
				/*padding-top: 70%;*/
			}
			.main{
				width: 100%;
				height: 5.865217rem;
				text-align: center;
				position: relative;
			}
			.sjzc{
				width: 70%;
				height: 1rem;
				line-height: 1rem;
				padding-left: 0.869565rem;
				font-size: 0.391304rem;
				margin-top: 0.434782rem;
				border-radius: 0.217391rem;
				background: url(../../img/sjktb.png) 4% center no-repeat;
				background-size:5%;
				border:  solid 0.021739rem #f3f3f3;
				outline: 0;
			}
			.szmm{
				width: 70%;
				height: 1rem;
				line-height: 1rem;
				padding-left: 0.869565rem;
				font-size: 0.391304rem;
				margin-top: 0.534782rem;
				border-radius: 0.217391rem;
				background: url(../../img/zcmm.png) 4% center no-repeat;
				background-size:5%;
				border:  solid 0.021739rem #f3f3f3;
				outline: 0;
			}
			.zcan{
				width: 80%;
				height: 1rem;
				background-color: #e6524e;
				color: #fff;
				border-radius: 0.217391rem;
				margin-top: 0.869565rem;
				font-size: 0.47826rem;
			}
			.alj{
				position: absolute;
				right: 0.326086rem;
				bottom: 0;
			}
			
</style>